import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'

import { Table, Divider, Button, Modal, Form, Input, Radio, Space, Tag,  Popconfirm, message } from 'antd';
import { addKind, getKindlist, delAllKindlist, delOneKindlist, getOneKind, UpdateOneKind, GetOneKind } from '../../../api/kind'
import TimeShow from '../../../components/TimeShow'

const { TextArea } = Input;

const ClassmanageTwo = (props) => {
    const getkindid = props.location.search.split("=")[1]
    useEffect(() => {
        // 查找二级分类
        GetOneKind({ kindid: getkindid }).then(res => {
            console.log(res)
            setTowkindlist(res.data.data)
        })
    }, [])
    const [twokindlist, setTowkindlist] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    //新增二级分类
    const [showstatus, setShowstatus] = useState(1);
    const [kindname, setkindname] = useState('')
    const [info, setInfo] = useState('')
    // 编辑二级模态框数据
    const [showstatus2, setShowstatus2] = useState('');
    const [kindname2, setkindname2] = useState('')
    const [info2, setInfo2] = useState('')
    const [isModalVisible2, setIsModalVisible2] = useState(false);


    const [selectedRowKeys, setSeletRowKeys] = useState([])
    const onSelectChange = (selectedRowKeys, selectedRow) => {
        setSeletRowKeys(selectedRowKeys);
        console.log(selectedRowKeys)
        // selectedRowKeys 选中的数据项组成的数组，数组元素对应 rowKey 设置的唯一字段名
        // selectedRow 选中的数据项组成的数组，数组元素对应 每条选中的数据对象
    }
    const addTwoKind = () => {
        setIsModalVisible(true)
    }
    // 模态框点击确定
    const handleOk = () => {
        addKind({
            kindname,
            info,
            showstatus,
            level: 2,
            uploadPerson: props.truename,
            parentCategory: getkindid
        }).then(res => {
            GetOneKind({ kindid: getkindid }).then(res => {
                setTowkindlist(res.data.data)
            })
            setkindname('')
            setInfo('')
            setShowstatus(1)
            setIsModalVisible(false);
        })
    }
    const handleCancel = () => {
        setIsModalVisible(false)
    }

    const rowSelection = {
        selectedRowKeys, //当前页面选中的项
        onChange: onSelectChange, //获取选中的值
    }
    const editIsModalVisible2 = (kindid) => () => {
        getOneKind({ kindid }).then(res => {
            console.log(res.data.data)
            setkindname2(res.data.data[0].kindname)
            setInfo2(res.data.data[0].info)
            setShowstatus2(res.data.data[0].showstatus)
            setIsModalVisible2(true)
        })
    }
    const handleOk2 = (id) => () => {
        // 编辑模态框点击更新
        console.log(kindname2, info2, showstatus2)
        UpdateOneKind({
            kindid: id,
            kindname: kindname2,
            info: info2,
            showstatus: showstatus2
        }).then(res => {
            console.log(res)
            getKindlist().then(res => {
                setTowkindlist(res.data.data)
            })
            setIsModalVisible2(false)

        })
    }
    // 编辑模态框 取消按钮
    const handleCancel2 = () => {
        setIsModalVisible2(false)
    }
    // 确定删除该条数据
    const confirm = (kindid, index) => () => {
        console.log(kindid, index)
        delOneKindlist({ kindid }).then(res => {
            console.log(res)
            let arr1 = JSON.parse(JSON.stringify(twokindlist))
            arr1.splice(index, 1)
            setTowkindlist(arr1)
        })
        message.success('删除成功');
    }
    // 取消 不删除
    function cancel(e) {
        console.log(e);
    }
    // 批量删除
    const delAll = () => {
        delAllKindlist(selectedRowKeys).then(res => {
            if (res.data.code) {
                getKindlist().then(res => {
                    setTowkindlist(res.data.str)
                })
            }
        })
    }
    const columns = [
        {
            align: 'center',
            title: '分类名称',
            dataIndex: 'kindname',
            render: text => <a>{text}</a>,
        },
        {
            align: 'center',
            title: '级别',
            dataIndex: 'level',
            render: text => <span>{text === 1 ? '一级' : '二级'}</span>,
        },
        {
            align: 'center',
            title: '状态',
            dataIndex: 'showstatus',
            render: text => <span>{text === 1 ? '显示' : '不显示'}</span>,
        },
        {
            align: 'center',
            title: '备注',
            dataIndex: 'info',
        },
        {
            align: 'center',
            title: '上传人',
            dataIndex: 'uploadPerson',
        },
        {
            align: 'center',
            title: '添加时间',
            dataIndex: 'createTime',
            render: (text, record, index) => {
                return TimeShow({ time: text })
            }
        },
        {
            align: 'center',
            title: '操作',
            render: (text, record, index) => {
                return <Space>
                    <Tag color="#f50" onClick={editIsModalVisible2(record.kindid)}>编辑</Tag>
                    {/* 编辑模态框 */}
                    <Modal title="修改药品分类" visible={isModalVisible2} onOk={handleOk2(record.kindid)} onCancel={handleCancel2}>
                        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}
                            requiredMark={false}>

                            <Form.Item
                                label="分类名称"
                                rules={[{ required: true, message: '分类名称不能为空' }]}
                            >
                                <Input style={{ width: 160 }} placeholder="请输入" value={kindname2} onChange={(e) => { setkindname2(e.target.value) }} />
                            </Form.Item>

                            <Form.Item
                                label="备注"
                                rules={[{ required: true, message: '备注不能为空' }]}
                            >
                                <TextArea rows={4} allowClear={true} maxLength={140} showCount={true} value={info2} onChange={(e) => { setInfo2(e.target.value) }} />
                            </Form.Item>

                            <Form.Item
                                label="是否显示"
                            >
                                <Radio.Group onChange={(e) => { setShowstatus2(e.target.value) }} value={showstatus2} >
                                    <Radio value={1}>是</Radio>
                                    <Radio value={2}>否</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Form>
                    </Modal>
                    <Popconfirm
                        title="你确定要删除这个药品吗？"
                        onConfirm={confirm(record.kindid, index)}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Tag color="#f50">删除</Tag>
                    </Popconfirm>
                </Space>
            }
        },
    ];
    const data = twokindlist;
    return (
        <div>
            <div className="kindbtn">
                <h1>分类列表</h1>
                <Button onClick={() => { props.history.goBack() }}>返回</Button>
            </div>
            <Divider />
            <div className="kindlist">
                <div style={{ display: 'flex' }}>
                    <h1>二级分类</h1>
                    <Button style={{ marginLeft: '10px' }} onClick={delAll}>批量删除</Button>
                </div>
                <Button onClick={addTwoKind}>新增分类</Button>
                {/* 新增二级分类模态框 */}
                <Modal title="新增二级药品分类" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}
                        requiredMark={false}>

                        <Form.Item
                            label="分类名称"
                            rules={[{ required: true, message: '分类名称不能为空' }]}
                        >
                            <Input style={{ width: 160 }} placeholder="请输入" value={kindname} onChange={(e) => { setkindname(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="备注"
                            rules={[{ required: true, message: '备注不能为空' }]}
                        >
                            <TextArea rows={4} allowClear={true} maxLength={140} showCount={true} value={info} onChange={(e) => { setInfo(e.target.value) }} />
                        </Form.Item>

                        <Form.Item
                            label="是否显示"
                        >
                            <Radio.Group onChange={(e) => { setShowstatus(e.target.value) }} value={showstatus} >
                                <Radio value={1}>是</Radio>
                                <Radio value={2}>否</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
            <div>
                <Table
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={data}
                    rowKey={record => record.kindid}
                />
            </div>
        </div>
    )
}


export default connect(state => ({//设置状态 获取这些值
    truename: state.getIn(['user', 'truename']) //获取用户名
}), dispatch => ({

}))(ClassmanageTwo)
